<template>
  <div class="content">
    <MainTop></MainTop>
    <div class="box">
      <div class="btns">
        <el-button style="background: rgb(23, 28, 73)" @click="router.go(-1)"
          >返回</el-button
        >
        <el-button :style="is === '1' ? bgColor1 : bgColor2" @click="dayR">今日人数</el-button>
        <el-button :style="is === '1' ? bgColor2 : bgColor1" @click="dayC" >今日收益</el-button>
      </div>

      <div class="con" v-show="flagR">
        <div class="renshu">
          <h3>人数概况</h3>
          <div>
            <dl>
              <dt>访问人数</dt>
              <dd><span>2080人</span></dd>
              <dd>
                <b>日</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>周</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>月</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
            </dl>
            <dl>
              <dt>新访问人数</dt>
              <dd><span>91人</span></dd>
              <dd>
                <b>日</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>周</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>月</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
            </dl>
            <dl>
              <dt>下单人数</dt>
              <dd><span>21人</span></dd>
              <dd>
                <b>日</b><i style="color: green">28.61%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: green"
                />
              </dd>
              <dd>
                <b>周</b><i style="color: green">17.29%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: green"
                />
              </dd>
              <dd>
                <b>月</b><i style="color: green">60.21%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: green"
                />
              </dd>
            </dl>
            <dl>
              <dt>新增下单人数</dt>
              <dd><span>2人</span></dd>
              <dd>
                <b>日</b><i>12.81%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>周</b><i>12.71%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>月</b><i>21.00%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
            </dl>
          </div>
        </div>
        <div class="data" ref="dataContent"></div>
      </div>

      <div class="con2" v-show="flagC" >
        <div class="renshu">
          <h3>收益概况</h3>
          <div style="margin-left: 200px">
            <dl>
              <dt>今日收益</dt>
              <dd><span>28.50元</span></dd>
              <dd>
                <b>日</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>周</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>月</b><i>33.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
            </dl>
            <dl>
              <dt>本周收益</dt>
              <dd><span>85.50元</span></dd>
              <dd>
                <b>周</b><i>18.29%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
              <dd>
                <b>月</b><i>21.11%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: red"
                />
              </dd>
            </dl>
            <dl>
              <dt>本月收益</dt>
              <dd><span>1985.80元</span></dd>
              <dd>
                <b>月</b><i style="color: green">60.21%</i
                ><component
                  is="Bottom"
                  style="width: 12px; height: 12px; color: green"
                />
              </dd>
            </dl>
          </div>
        </div>
        <div class="data" ref="dataContent2"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MainTop from "@/views/module/MainTop.vue";
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { doubleLineChart, doubleLineArea } from "@/utils/chart.js";

const router = useRouter();
const route = useRoute();

//获取dom
const dataContent = ref(null);
const dataContent2 = ref(null);

//控制显示人数还是收益信息
const flagR = ref(true);
const flagC = ref(false);

// background: rgb(23, 28, 73)
//存储颜色
//蓝色
const bgColor1 = ref("background: rgb(23, 28, 73)");
//灰色
const bgColor2 = ref("background: rgb(153, 153, 153)");

const is = ref('1');

//控制显示人数
function dayR() {
  is.value = "1";
  flagR.value = true;
  flagC.value = false;
  bgColor1.value = "background: rgb(23, 28, 73)";
  bgColor2.value = "background: rgb(153, 153, 153)";

}

//控制显示收益
function dayC() {
  is.value = "1";
  flagR.value = false;
  flagC.value = true;
  bgColor1.value = "background: rgb(153, 153, 153)";
  bgColor2.value = "background: rgb(23, 28, 73)";

}


//完成挂载后执行
onMounted(() => {
  is.value = route.query.id;
  var myChart = echarts.init(dataContent.value);
  var myChart2 = echarts.init(dataContent2.value);
  doubleLineChart(myChart);
  doubleLineArea(myChart2);
});
</script>

<style lang="less" scoped>
.content {
  .box {
    width: 1320px;
    height: 1200px;
    background: rgb(241, 245, 251);
    .btns {
      padding-top: 10px;
      margin-left: 15px;
      .el-button {
        height: 40px;
        font-size: 12px;
        color: white;
        font-weight: 600;
      }
    }

    .con {
      height: 900px;
      width: 1280px;
      box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
      background: white;
      margin-left: 20px;
      margin-top: 20px;
      padding-top: 60px;
      .renshu {
        box-shadow: 0px 10px 20px rgb(0 0 0 / 30%);
        width: 1100px;
        height: 400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
        h3 {
          font-weight: 600;
          margin-top: 30px;
          margin-left: 30px;
        }
        div {
          display: flex;
          margin-top: 80px;
          margin-left: 140px;
          dl {
            width: 200px;
            height: 140px;
            border-right: 1px solid gray;
            display: flex;
            flex-direction: column;
            align-items: center;
            dt {
              margin-bottom: 20px;
              color: gray;
            }
            dd {
              margin-bottom: 10px;
              span {
                font-weight: 600;
                font-size: 20px;
              }
              b {
                margin-right: 5px;
                color: gray;
              }
              i {
                color: red;
              }
            }
          }
          :last-child {
            border-right: 0;
          }
        }
      }

      .data {
        width: 1100px;
        height: 400px;
        margin: 0 auto;
        box-shadow: 0px 10px 20px rgb(0 0 0 / 30%);
      }
    }
    .con2 {
      height: 900px;
      width: 1280px;
      box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
      background: white;
      margin-left: 20px;
      margin-top: 20px;
      padding-top: 60px;
      .renshu {
        box-shadow: 0px 10px 20px rgb(0 0 0 / 30%);
        width: 1100px;
        height: 400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
        h3 {
          font-weight: 600;
          margin-top: 30px;
          margin-left: 30px;
        }
        div {
          display: flex;
          margin-top: 80px;
          margin-left: 140px;
          dl {
            width: 200px;
            height: 140px;
            border-right: 1px solid gray;
            display: flex;
            flex-direction: column;
            align-items: center;
            dt {
              margin-bottom: 20px;
              color: gray;
            }
            dd {
              margin-bottom: 10px;
              span {
                font-weight: 600;
                font-size: 20px;
              }
              b {
                margin-right: 5px;
                color: gray;
              }
              i {
                color: red;
              }
            }
          }
          :last-child {
            border-right: 0;
          }
        }
      }

      .data {
        width: 1100px;
        height: 400px;
        margin: 0 auto;
        box-shadow: 0px 10px 20px rgb(0 0 0 / 30%);
      }
    }
  }
}
</style>
